<template>
  <div class="jiankongBox">
    <div class="jiankongLeft">
      <div class="jiankongCarNumber">
        <el-input placeholder="输入车牌号码" clearable v-model="filterText"> </el-input>
        <el-tree
          default-expand-all
          node-key="id"
          v-loading="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
          ref="tree"
          highlight-current
          check-on-click-node
          :data="data"
          :check-strictly="true"
          :props="defaultProps"
          :filter-node-method="filterNode"
          @check="currentChecked"
        >
        </el-tree>
      </div>
    </div>
    <div class="jiankongRight">
      <div class="jiankongTop">
        <a
          style="color: blue; margin-right: 20px"
          href="http://m.a6gps.com/"
          target="_blank"
          >点击跳转到GPS监控系统</a
        >
        <span style="color: red">{{ count }}</span> 秒后自动刷新
      </div>
      <div class="bottom">
        <baidu-map
          class="jiankongMap"
          ak="PqqeGMn6pNyvOxnWwVLyexHQjwMtuzLn"
          :center="map.center"
          :zoom="map.zoom"
          @ready="handler"
        >
          <!--缩放-->
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
          <!--定位-->
          <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :showAddressBar="true"
            :autoLocation="true"
          ></bm-geolocation>
          <!--点-->
          <template v-for="(item, index) in mapObj">
            <bm-marker
              :key="index"
              :position="item"
              :icon="{ url: '/img/car.png', size: { width: 25, height: 50 } }"
              :rotation="item.direct"
              animation="BMAP_ANIMATION_DROP"
              @click="infoWindowOpen(item)"
            >
              <!-- 文本标记-->
              <bm-label :content="item.carNumber" :position="item" />
              <!--提示信息-->
              <bm-info-window
                style="width: 250px"
                :show="item.show"
                @close="infoWindowClose(item)"
              >
                <br />
                <table class="jiankongCar" border="0px" cellpadding="0" cellspacing="0">
                  <tr>
                    <td>当前位置：</td>
                    <td>{{ item.gpsInfo.addressDetail }}</td>
                  </tr>
                  <tr>
                    <td>车速(km/h)：</td>
                    <td>{{ item.gpsInfo.speed }}</td>
                  </tr>
                  <tr>
                    <td>当前状态：</td>
                    <td>{{ item.gpsInfo.status }}</td>
                  </tr>
                  <tr>
                    <td>在线状态：</td>
                    <td>{{ item.gpsInfo.online }}</td>
                  </tr>
                  <tr>
                    <td>定位时间：</td>
                    <td>{{ item.gpsInfo.gpsTime }}</td>
                  </tr>
                  <tr>
                    <td>经度：</td>
                    <td>{{ item.gpsInfo.lon }}</td>
                  </tr>
                  <tr>
                    <td>纬度：</td>
                    <td>{{ item.gpsInfo.lat }}</td>
                  </tr>
                  <tr>
                    <td>里程(km):</td>
                    <td>{{ item.gpsInfo.mileage }}</td>
                  </tr>
                </table>
              </bm-info-window>
            </bm-marker>
          </template>
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
import { getGpsId } from "@/api/tms/plan.js";
export default {
  data() {
    return {
      loading: true,
      mapObj: [],
      filterText: "",
      gpsInfo: {},
      count: "",
      timer: null,
      data: [
        {
          id: 1,
          carNumber: "车辆列表",
          children: [],
        },
      ],
      defaultProps: {
        //树形控件的属性绑定对象
        children: "children", //设置通过children属性展示子节点信息
        label: "carNumber", //通过label设置树形节点文本展示
        checkStrictly: true,
      },
      show: true,
      map: {
        center: { lng: "117", lat: "34" },
        zoom: 7,
        // dragging: true,
        // rotation: null,
      },
    };
  },
  created() {
    this.getTreeSelect();
    this.getCount();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    getCount() {
      let TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.data[0].children = [];
            this.getTreeSelect();
            this.getCount();
            this.loading = true;
          }
        }, 1000);
      }
    },
    handler({ BMap, map }) {
      // 鼠标缩放
      map.enableScrollWheelZoom(true);
    },
    // 打开弹窗
    infoWindowOpen(item) {
      item.show = true;
    },
    // 关闭弹窗
    infoWindowClose(item) {
      item.show = false;
    },
    // 树结构列表
    getTreeSelect() {
      getGpsId().then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.loading = false;
          res.data.map((item, index) => {
            console.log(222222, item);
            // 车辆信息
            // 车牌号码
            let Array = {};
            Array.id = item.id;
            Array.carNumber = item.carNumber;
            this.data[0].children.push(Array);
            // console.log(1111111,this.data[0]);
            // 标记点
            if (item.gpsInfo) {
              let Obj = {};
              Obj.lng = item.gpsInfo.lon;
              Obj.lat = item.gpsInfo.lat;
              Obj.direct = item.gpsInfo.direct;
              Obj.carNumber = item.carNumber;
              Obj.show = false;
              Obj.gpsInfo = item.gpsInfo;
              this.mapObj.push(Obj);
            }
            // console.log(this.mapObj);
          });
        }
      });
    },
    // 接收被勾选的数据
    currentChecked(nodeObj, SelectedObj) {
      console.log(nodeObj);
      this.mapObj.map((item) => {
        if (nodeObj.carNumber == item.carNumber) {
          item.show = true;
          this.map.zoom = 12;
          this.map.center.lng = item.lng;
          this.map.center.lat = item.lat;
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      // indexOf字符串首次出现的位置
      return data.carNumber.indexOf(value) !== -1;
      // console.log(data);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.jiankongBox {
  width: 100%;
  /* background-color: green; */
  display: flex;
}
.jiankongLeft {
  width: 10%;
  padding: 20px 10px;
  /* background-color: pink; */
  display: flex;
}
.jiankongRight {
  flex: 1;
  height: 85vh;
  position: relative;
  width: 90%;
  /* background-color: red; */
}
.jiankongCarNumber {
  /* background-color: pink; */
  width: 130px;
}
.jiankongMap {
  position: absolute;
  width: 100%;
  height: 100%;
}
.jiankongCar {
  width: 100%;
  height: 100%;
  /* background-color: green; */
  margin-top: -10px;
}
.jiankongTop {
  text-align: right;
}
.jiankongCar tr td:first-child {
  width: 100px;
  text-align: right;
  font-size: 13px;
}
.jiankongCar tr td:last-child {
  color: blue;
  font-size: 12px;
}
</style>
